<template>
	<div class="wrapper">
		<div class="chat-window">
			<!-- 添加头部 -->
			<div class="header">饿了么客服</div>

			<!-- 添加聊天对话框 -->
			<div class="messages">
				<div v-for="(message, index) in chatHistory" :key="index" class="message">
					<!-- 添加用户头像和昵称 -->
					<div v-if="message.isUser" class="user-info">
						<div class="avatar user-avatar"></div>
						<div class="nickname">我:</div>
					</div>
					<!-- 添加客服头像和昵称 -->
					<div v-else class="bot-info">
						<div class="avatar bot-avatar"></div>
						<div class="nickname">智能客服：</div>
					</div>

					<div class="message-content" :class="{ 'user-message': message.isUser, 'bot-message': !message.isUser }">
						<div class="message-text">{{ message.content }}</div>
						<div class="message-time">{{ getCurrentTime() }}</div> <!-- 显示消息发送时间 -->
					</div>

				</div>
			</div>

			<!-- 添加底部输入框和发送按钮 -->
			<div class="input-container">
				<input v-model="userMessage" type="text" placeholder="输入消息">
				<button @click="sendMessage">发送</button>
        <button @click="ManService">转到人工客服</button>
			</div>

			<!-- 添加悬浮窗 -->
<!--			<div class="floating-button"></div>-->

			<!-- 添加自定义的Footer组件 -->
			<Footer></Footer>
		</div>
	</div>
</template>

<script>
	import {
		ref,
		onMounted, nextTick
	} from 'vue';
	import axios from 'axios';
	import Footer from '../components/Footer.vue';
	import {
		useRoute,
		useRouter
	} from 'vue-router';
	import qs from 'qs';

	export default {
		name: 'Consultation',
		components: {
			Footer,
		},
    setup() {
      const chatHistory = ref([]);
      const userMessage = ref('');

      const getCurrentTime = () => {
        const now = new Date();
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        return `${hours}:${minutes}`;
      };

      const scrollToBottom = () => {
        const messageContainer = document.querySelector('.messages');
        if (messageContainer) {
          messageContainer.scrollTop = messageContainer.scrollHeight;
        }
      };

      const sendMessage = () => {
        const message = userMessage.value.trim();
        if (message === '') {
          return;
        }

        // 发送用户消息并添加到聊天历史
        addUserMessage(message);

        // 调用后端接口发送消息并获取回复
        callBackendAPI(message);

        // 清除输入框
        userMessage.value = '';
      };

      const addUserMessage = async (content) => {
        chatHistory.value.push({
          content,
          isUser: true
        });
        // 确保 DOM 完全更新后再滚动到底部
        await nextTick();
        scrollToBottom();
      };

      const addBotMessage = async (content) => {
        chatHistory.value.push({
          content,
          isUser: false
        });
        // 确保 DOM 完全更新后再滚动到底部
        await nextTick();
        scrollToBottom();
      };

      const ManService = () => {
        alert('要想进一步具体咨询，请拨打电话：18854553694');
      };

      const callBackendAPI = (message) => {
        axios.post('AiController/listOptionByAdj', qs.stringify({
          adj: message
        }))
            .then(response => {
              const resultList = response.data;
              addBotMessage(resultList);
            })
            .catch(error => {
              console.error(error);
            });
      };

			onMounted(() => {
				if (chatHistory.value.length === 0) {
					addBotMessage('欢迎！我是饿了么的智能客服，有什么想要咨询的吗？');
				}
			});

			return {
				chatHistory,
				userMessage,
				sendMessage,
				getCurrentTime,
				callBackendAPI,
				addUserMessage,
				addBotMessage,
        ManService
			};
		}
	};
</script>


<style scoped>
	.message-time {
		color: #999;
		font-size: 12px;
		margin-top: 4px;
		margin-left: 16px;
	}

  html, body {
    overflow: hidden; /* 禁用外部页面的滚动 */
    height: 100%; /* 确保页面高度是100% */
    margin: 0; /* 移除页面默认的外边距 */
  }

	.wrapper {
    width: 100%;
    height: 100vh; /* 设置 wrapper 高度为视口高度，防止外部滚动 */
    display: flex;
    flex-direction: column; /* 确保内容从上到下排列 */
	}

	.chat-window {
    display: flex;
    flex-direction: column;
    height: 100%; /* 填充父容器 */
    padding: 20px;
    box-sizing: border-box; /* 确保 padding 不影响高度 */
	}

	.header {
		background-color: #2196f3;
		color: #fff;
		padding: 20px;
		text-align: center;
		font-weight: bold;
		border-radius: 10px;
		/* 添加圆角样式 */
		
		font-size: 24px;
		/* 增加字体大小 */
	}

  .messages {
    height: calc(100vh - 220px); /* 确保消息区域有足够的高度 */
    overflow-y: auto;
    overflow-x: hidden; /* 隐藏横向滚动条 */
    padding-bottom: 10px;
  }

  .message {
    margin: 10px 0; /* 减少消息之间的垂直间距 */
  }

	.user-info,
	.bot-info {
		display: flex;
		align-items: flex-start;
		margin-top: 4px;
		margin-left: 16px;
		width: 100%;
	}

	/* .user-info .avatar,
	  .bot-info .avatar {
	    width: 30px;
	    height: 30px;
	    border-radius: 50%;
	    margin-right: 8px;
	  } */

	.user-info .avatar {
		background-color: #ff4081;
		background-image: url('../assets/userImg/yhtx06.png');
		/* 替换为用户头像图片路径 */
		background-size: cover;
		background-position: center;
	}

	.bot-info .avatar {
		background-color: #3f51b5;
		background-image: url('../assets/userImg/yhtx02.png');
		/* 替换为用户头像图片路径 */
		background-size: cover;
		background-position: center;
	}

	.nickname {
		font-weight: bold;
		margin-right: 4px;
	}

	.message-content {
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 8px;
    margin-left: 8px;
	}

	.message-text {
		margin-bottom: 4px;
	}

	.user-message {
		display: flex;
		align-items: center;
		background-color: #e4e4e4;
		padding: 8px;
		border-radius: 4px;
	}

	.bot-message {
		display: flex;
		align-items: center;
		background-color: #f0f8ff;
		padding: 8px;
		border-radius: 4px;
	}

	.avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 8px;
	}

	.user-avatar {
		background-color: #ff4081;
	}

	.bot-avatar {
		background-color: #3f51b5;
	}

	.nickname {
		
		font-weight: bold;
		margin-right: 4px;
		margin-top:10px;
	}

  .input-container {
    width: 100%; /* 使用100%宽度填充父容器 */
    position: fixed;
    bottom: 60px; /* 保持输入框在 Footer 上方 */
    left: 0;
    display: flex; /* 横向排列子元素 */
    gap: 10px;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    z-index: 1000;
    align-items: center;
  }

  .input-container input {
    flex: 1; /* 让输入框占据可用空间 */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .input-container button {
    padding: 8px 16px;
    border: none;
    background-color: #2196f3;
    color: white;
    border-radius: 5px;
    cursor: pointer;
  }

  .input-container button:last-child {
    background-color: #ff5722; /* 设置“转到人工客服”按钮为不同颜色 */
  }


  .floating-button {
    margin-left: auto; /* 确保悬浮按钮在同一行右对齐 */
    position: fixed;
    background-color: #b8b8b8;
    color: #0d0d0d;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    font-size: small;
    z-index: 1001; /* 确保按钮显示在页面前面 */
	}
</style>
